<template>
    <div class="recommend">
        <p class="title">推荐</p>
        <p class="hiTitle">Hi wenpens.. 今日推荐</p>
        <todayRecommend></todayRecommend>
        <p class="hiTitle">你的歌单宝藏库</p>
        <yourPrecious></yourPrecious>
        <p class="hiTitle">推荐歌曲</p>
        <RecomSongs></RecomSongs>
    </div>
</template>

<script lang="ts" setup>
/* 我也不知道它为什么会报错，反正是没问题的，请无视这个报错 */
import todayRecommend from './todayRecommend.vue';
import yourPrecious from './yourPrecious.vue'
import RecomSongs from './RecomSongs.vue'

</script>

<style scoped lang="scss" >
.recommend {
    display: flex;
    flex-direction: column;
    max-height: 100%;

    .title {
        margin-top: 10px;
        font-size: 45px;
        font-weight: 800;
    }

    .hiTitle {
        margin-top: 10px;
        font-size: 33px;
        font-weight: 400;
    }
}
</style>